<template>
  <div class="myAddress">
    <myHead title="收货地址"></myHead>
    <!--    收货地址  -->
    <div class="myAddressBox" v-for="(x,y) in userAddress">
      <div class="AddressBoxHeader">
        <img class="dibiao" :src="x.id==mrDZ?'../../../static/img/address_1.png':'../../../static/img/nodizhi001.png'" alt="" >
        <p>{{x.id == mrDZ?'收货人  '+x.name:x.name}}</p>
        <p>{{x.phone}}</p>
        <div class="useAddress"  @click="setMr(x.id,y)">使用</div>
      </div>
      <div class="AddressInfo">
        {{x.dispatching+x.particular}}
      </div>
      <div class="biaoxian"></div>
      <div class="Address_set">
        <div class="set_left">
          <img :src="`${x.id==mrDZ?isDef[0]:isDef[1]}`" alt="" @click="setMr(x.id,y)">
          <p :class="x.id == mrDZ?'isMr':''">{{x.id==mrDZ?'已设为默认':'设为默认'}}</p>
        </div>
        <div class="set_right">
          <div class="edit" @click="edit(x)"><img src="../../assets/img/address_3.png" alt=""><span>编辑</span></div>
          <div class="remove" @click="remove(x.id,y)"><img src="../../assets/img/address_4.png" alt=""><span>删除</span></div>
        </div>
      </div>
    </div>
    <!--    手动添加  -->
    <footer @click="addAddress">
      手动添加
    </footer>
    <!--  询问弹窗  -->
    <van-dialog v-model="removeShow" title="确定删除吗？" show-cancel-button width="3.2rem" @confirm="confirm"></van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import Vue from 'vue';
  import { Dialog } from 'vant';
  Vue.use(Dialog);
  export default {
    name: "myAddress",
    components: {
      myHead
    },
    data() {
      return {
        userAddress: [],
        isDef: ['../../../static/img/address_2.png', '../../../static/img/address_5.png'],
        removeShow:false,
        state:'no',
        removeIndex:0, // 要删除的地址下标
        mrDZ:0
      }
    },
    created(){
      // 请求地址列表
      this.$myAxios('index/address/index','post',{
        user_id:this.$myStorage.query()
      }).then(res=>{
        if (res.data.state) {
          this.userAddress = res.data.address;
          console.log(this.userAddress)
        }else {
          this.$myNotice('您还没有地址！',3000);
        }
      });
      this.$myAxios('index/address/default_address','post',{
        user_id:this.$myStorage.query()
      }).then(res=>{
        console.log(res.data)
        if (res.data.state == 1) {
          this.mrDZ = res.data.default_address.default_address;
        }
      })
    },
    methods: {
      addAddress() {
        this.$router.push({
          name: 'addAddress'
        })
      },
      setMr(id,index){
        this.$myStorage.setItem('sessionStorage','mr',index);
        this.$router.back();
        //   for (let i in this.userAddress) {
        //       this.userAddress[i].type = false;
        //   }
        // var arr = this.userAddress.slice(0);
        // arr[index].type = true;
        // this.$myAxios('index/address/default_address','post',{
        //   user_id:this.$myStorage.query()
        // }).then(res=>{
        //   console.log(res.data)
        //   if (res.data.state == 1) {
        //     this.userAddress = arr;
        //     this.$myStorage.setItem('sessionStorage','mr',index)
        //
        //   } else {
        //     this.$myNotice('请检查网络~',1500)
        //   }
        // })
      },
      confirm(index,state){
        if (state != 'no') {
          // 删除地址
          this.$myAxios('index/address/delete','post',{
            id:this.state
          }).then(res=>{
            if (res.data.state){
              var arr = this.userAddress.slice(0);
              arr.splice(this.removeIndex,1);
              console.log(this.removeIndex)
              this.userAddress = arr;
              console.log(this.userAddress)
            }else {
              this.$myNotice('网络出现了点问题喔~',1500)
            }
          });

        }
      },
      remove(index,y){
        this.removeShow = true;
        this.state = index;
        this.removeIndex = y;
      },
      edit(data){
        this.$router.push({
          name:'addAddress',
          query:{
            data,
            type:data.id==this.mrDZ?1:0
          }
        })
      }
    }
  }
</script>

<style scoped>
  .myAddress {
    padding-top: .5rem;
    min-height: 6.17rem;
    box-sizing: border-box;
    padding-bottom: .65rem;
  }
  .myAddressBox {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem .15rem 0 .13rem;
    box-shadow: 0 .03rem .12rem 0 rgba(0, 0, 0, 0.09);
    margin-top: .13rem;
  }

  .AddressBoxHeader {
    height: .23rem;
    display: flex;
    position: relative;
    flex-flow: row;
    align-items: center;
    margin-bottom: .03rem;
  }

  .AddressBoxHeader p:nth-child(2) {
    max-width: 1.6rem;
    margin-right: .1rem;
  }

  .AddressBoxHeader p:nth-child(2),
  .AddressBoxHeader p:nth-child(3) {
    font-size: .15rem;
    color: #292621;
    font-weight: bold;
  }

  .AddressBoxHeader p:nth-child(3) {
    font-size: .14rem;
  }

  .AddressInfo {
    max-width: 2.9rem;
    font-size: .14rem;
    color: #333333;
    padding-bottom: .15rem;
  }

  .dibiao {
    width: .16rem;
    height: .20rem;
    margin-right: .1rem;
  }

  .Address_set {
    display: flex;
    height: .45rem;
    flex-flow: row;
    /*justify-content: space-evenly;*/
    align-items: center;
  }

  .Address_set > div {
    width: 50%;
    height: 100%;
  }

  .set_left {
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .set_left > img {
    margin-right: .1rem;
    width: .15rem;
    height: .15rem;
  }

  .set_left p {
    font-size: .12rem;
    color: #8A857C;
  }

  .set_right {
    display: flex;
    flex-flow: row;
    box-sizing: border-box;
    padding-left: .7rem;
  }

  .edit {
    margin-right: .16rem;
  }

  .edit, .remove {
    /*width: 50%;*/
    display: flex;
    flex-flow: row;
    align-items: center;
    text-align: right;
  }

  .edit > span, .remove > span {
    font-size: .12rem;
    color: #8A857C;
  }

  .edit img {
    width: .14rem;
    height: .16rem;
    margin-right: .05rem;
  }

  .remove img {
    width: .14rem;
    height: .14rem;
    margin-right: .05rem;
  }

  .useAddress {
    width: .5rem;
    height: .23rem;
    border: .01rem solid rgba(138, 133, 124, 1);
    border-radius: .12rem;
    font-size: .12rem;
    color: #8A857C;
    line-height: .23rem;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
  }

  .biaoxian {
    width: 100%;
    height: .01rem;
    background: rgba(245, 242, 237, 1);
  }

  .isMr {
    color: #FF7611 !important;
  }

  .myAddress footer {
    font-family: PingFang;
    width: 100%;
    height: .5rem;
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
    font-size: .17rem;
    letter-spacing: .01rem;
    color: #ffffff;
    font-weight: bold;
    line-height: .5rem;
    text-align: center;
  }

  /* 弹窗 */
  /deep/ .van-dialog {
    font-size: .16rem !important;
    border-radius: .16rem !important;
    width: 3.2rem !important;

  }
  >>> .van-button--large {
    line-height: .48rem;
    height: .5rem;
  }
  >>> .van-button {
    font-size: .16rem;
    border-radius: .02rem;
  }
  >>> .van-dialog__header {
    line-height: .24rem;
  }
  >>> .van-dialog__header--isolated {
    padding: .24rem 0;
  }
</style>
